<template>
  <div class="el-main newAdd">
    <el-form ref="richText" :rules="rules" :model="richText" label-width="120px">
      <el-form-item label="公告标题" prop="title">
        <el-input v-model="richText.title" :disabled="richText.status===1" ></el-input>
      </el-form-item>
      <el-form-item label="公告类型"  prop="type">
        <el-select v-model="richText.type" size="medium" :disabled="richText.status===1"  placeholder="请选择">
          <template  v-for="item in options">
            <el-option
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item v-show="false" label="id">
        <el-input v-model="richText.id"></el-input>
      </el-form-item>
      <el-form-item label="公告内容"  prop="content">
        <!-- template部分   -->
        <quill-editor :disabled="richText.status===1" :options="editorOption"
                      v-model="richText.content" @change="onEditorChange($event)">
          ref="myQuillEditor">
        </quill-editor>

      </el-form-item>
      <!--    <el-form-item label="新闻上传时间" align="left">
            <el-date-picker v-model="richText.date2" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>-->
      <el-form-item style="padding-top: 0px" prop="status">
        <el-input v-show="false" v-model="richText.status"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-show="!richText.status" @click="onSubmit('richText')">保存</el-button>
        <el-button @click="exit">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

  import { ImageDrop } from 'quill-image-drop-module'
  import ImageResize from 'quill-image-resize-module'
  Quill.register('modules/imageDrop', ImageDrop)
  Quill.register('modules/imageResize', ImageResize)
  export default {
    name: "NewsAdd",
    data() {
      return {
        richText: {
          title: '',
          content: ``,
          type: "",
          status: 0
        },
        editorOption: {
        //  theme: 'bubble',
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{ 'header': 1 }, { 'header': 2 }],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'indent': '-1' }, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': ['small', false, 'large', 'huge'] }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'font': [] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'align': [] }],
              ['clean'],
              ['link', 'image']
            ],
            history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }
          }
        },
        options: [{
          value: '11',
          label: '通知公告'
        }, {
          value: '12',
          label: '媒体聚焦'
        }, {
          value: '13',
          label: '信息公开'
        }, {
          value: '14',
          label: '廉政监督'
        }],
        rules:{
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 3, max: 40, message: '长度在 3 到 40个字符', trigger: 'blur' }
          ],
          type: [
            {  required: true, message: '请至少选择一个新闻类型', trigger: 'change' }
          ],
        }
      }
    },
    mounted() {
      this.content = `<p><strong><em>Click on the Image Below to resize!</em></strong></p><br>` + this.content
    },
    computed:{
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },
    methods: {
      onEditorChange({ editor, html, text }) {
        // console.log('editor change!', editor, html, text)
        this.richText.content = html
      },
      onSubmit(richText) {
        let that = this;
        that.$refs[richText].validate((valid) => {
          if (valid) {
            this.instance.post('/w/announcements', that.richText)
              .then(function (response) {
                that.$router.push({name: 'announcementDynamics'})
              })
              .catch(function (error) {
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        })

      },
      findById() {
        let that = this;
        this.instance.get('/w/announcements/' + that.id)
          .then(function (response) {
            that.richText = response.data;
          })
          .catch(function (error) {

          });
      },
      exit() {
        this.$router.push({name: 'announcementDynamics'}) // 只能用 name
      }
    },
    mounted() {
      let that = this;
      if (that.id != undefined) {
        that.findById();
      }
    },
    created() {
      let that = this;
      that.richText.type = that.$route.query.type
      if (!!that.$route.query.id) {
        that.id = that.$route.query.id
      }
    }
  }
</script>

<style scoped lang="scss">
  .quill-editor {
    min-height: 200px;
  }
</style>
<style>
  @import '../../../styles/element-ui.scss';
  .ql-editor {
    min-height: 200px;
  }
</style>
